<template>
  <div class="arrow-wrapper">
    <div class="button-wrapper">
      <van-button
          @click.stop size="small"
          round type="primary" icon="eye"/>
    </div>
    <van-button
        size="small"
        @click.stop="toggleShowMore" round
        :icon=" showMore ? 'arrow-down' : 'arrow-up'"/>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';

defineOptions({name: 'ManualRelationFormCardBottomButton'});
const emits = defineEmits(['toggleShowMore', 'update:showMore']);
const props = defineProps({
  showMore: createProps(Boolean),
});

function toggleShowMore() {
  emits('update:showMore', !props.showMore);
}

</script>
<style scoped lang="less">
.arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-wrapper {
  flex: 1;
  text-align: right;
  padding-right: 10px;
}
</style>